<template>
	<view class="petsContainer">
		<uni-segmented-control class="menu" :current="current" :values="values" style-type="button"
			active-color="#2B9939" @clickItem="onClickItem" />
		<view class="petsBox" v-for="item in petsArray" :key="item._id">
			<view class="petsImage">
				<image lazy-load :src="item.url" mode="widthFix" @click="preView(index)"></image>
			</view>
			<view class="desc">
				{{item.content}}
				——{{item.source}}
			</view>
			<view class="author">
				{{item.author}}
			</view>
		</view>

		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>			
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
	const petsArray  = ref([])
	const current = ref(1)
	const classify = [{key:"all",value:"全部"},{key:"dog",value:"狗狗"},{key:"cat",value:"猫猫"}]
	const values = computed(()=>classify.map(item=>item.value))
	
	function netWork(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:10,
				type:classify[current.value].key
			},
		}).then(res=>{
			petsArray.value = [...petsArray.value,...res.data.data]
			console.log(res.data.data);
		}).catch(()=>{
			
		}).finally(()=>{
			uni.hideNavigationBarLoading() // 标题处导航加载
			uni.stopPullDownRefresh();  // 取消下拉刷新
		})
	}
	function onRefresh(){
		uni.startPullDownRefresh();
	}
	function onTop(){
		uni.pageScrollTo({
			scrollTop:0,
			duration:100
		})
	}
	function preView(index){
		let urls = petsArray.value.map(item=>item.url);	
		uni.previewImage({
			current:index,
			urls
		})
	}
	const onClickItem=(e)=>{
		current.value = e.currentIndex	
		petsArray.value = []	
		netWork();
	}
	onReachBottom(()=>{
		netWork()
	})
	onPullDownRefresh(()=>{
		petsArray.value = []
		netWork()
	})
	netWork()
</script>

<style lang="scss" scoped>
	.petsContainer{
		.menu{
				margin-bottom: 5rpx;
			}
		.petsBox{
			width: 99%;
			margin: 0 auto;
			margin-bottom:60rpx;
			box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
			border-radius: 15rpx;
			overflow: hidden;
			.petsImage{
				text-align: center;
			}
			.desc{
				padding:0 30rpx 30rpx;
			}
			.author{
				padding:0 30rpx 30rpx;
				text-align: right;
			}
		}
		.float{
				position: fixed;
					right:30rpx;
					bottom:80rpx;
					padding-bottom:env(safe-area-inset-bottom);
					.item{
						width: 90rpx;
						height: 90rpx;
						background: rgba(255,255,255,0.9);
						border-radius: 50%;
						margin-bottom:20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border:1px solid #eee;
					}
		}
		.loadMore{
				padding-bottom:calc(env(safe-area-inset-bottom) + 50rpx);
			}
	}
</style>
